@extends('layouts.'.getTheme())
@section('css')
<link href="{{asset(getThemeAssets('dataTables/datatables.min.css', true))}}" rel="stylesheet">
<link href="{{asset(getThemeAssets('css/toastr.min.css'))}}" rel="stylesheet">
<style type="text/css">
	.timeline-item p{
        font-size: 15px;
    }
    .timeline-item i,small{
        font-size: 14px;
    }
    .footer{
        display: none;
    }
</style>
@endsection
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <h2>{!!trans('monitordefine.title')!!}</h2>
    <ol class="breadcrumb">
        <li>
            <a href="{{url('admin')}}">{!!trans('home.title')!!}</a>
        </li>
        <li class="active">
            <strong>{!!trans('monitordefine.title')!!}</strong>
        </li>
    </ol>
  </div>
  <div class="col-lg-2">
    <div class="title-action">
      
    </div>
  </div>
</div>
<div class="wrapper wrapper-content animated" style="padding-bottom: 0px;">
  <div class="row">
    <div class="col-lg-4">
      <div class="ibox">
        <div class="ibox-title">
          <h5>{!!trans('monitordefine.location')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
                <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="PR">
                                        <option>江苏省</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="PR"
                                       style="padding-left: 0;text-align: left">省</label>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="City">
                                        <option>苏州市</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="City"
                                       style="padding-left: 0;text-align: left">市</label>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="Town">
                                        <option>张家港市</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="Town"
                                       style="padding-left: 0;text-align: left">县</label>
                            </div>
                        </form>              
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="ibox">
        <div class="ibox-title">
          <h5>{!!trans('monitordefine.extraplace')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
                <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Shop">车 间</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Shop">
                                        <option class="selected">01车间</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Part">工 段</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Part">
                                        <option class="selected">01工段</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Room">电气室</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Room">
                                        <option class="selected">01电气室</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                        </form>
        </div>
  </div>
</div>
<!-- 各回路测点临界值设置 -->
<div class="wrapper wrapper-content animated">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox">
        <div class="ibox-title">
          <h5>{!!trans('monitordefine.all_monitor')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
                <div class="alert alert-info fade in">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    对当前角色所拥有的电气室回路具有查看、修改、删除、新增的权限。
                </div>   
          <div class="table-responsive">
                <a name="addLoop" href='#edit-modal' class="btn btn-primary" data-toggle='modal' style="margin-bottom: 15px;">
                <div class="glyphicon glyphicon-plus"></div>新增
              </a>
          @include('flash::message')
          {!! $html->table(['class' => 'table table-striped table-bordered nowrap']) !!}            
          </div>     
        </div>
      </div>
    </div>
  </div>
</div>
                <!--编辑弹出框start-->
                <div class="modal modal-message fade" id="edit-modal">
                    
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">测点信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered nowrap" width="100%">
                                        <thead>
                                        <tr>
                                            <th colspan="1">测点ID</th>
                                            <th colspan="2">
                                                <input class="form-control input-sm" name="monitor_id" id="monitor_id">
                                            </th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">电气回路名称</th>
                                            <th colspan="2">
                                                <input class="form-control input-sm" name="loop_name" id="loop_name" type="text">
                                            </th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">检测指标</th>
                                            <th colspan="1">额定值</th>
                                            <th colspan="1">传感器</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            <td>电缆温度</td>
                                            <td><input class="form-control input-sm" name="cable_temp" id="cable_temp"></td>
                                            <td><input class="form-control input-sm" name=""></td>
                                        </tr>
                                        <tr>
                                            <td>烟雾额定值</td>
                                            <td><input class="form-control input-sm" name="smoke" placeholder="1" id="smoke"></td>
                                            <td><input class="form-control input-sm" name=""></td>
                                        </tr>
                                        <tr>
                                            <td>明火额定值</td>
                                            <td><input class="form-control input-sm" name="fire" 
                                            placeholder="1" id="fire"></td>
                                            <td><input class="form-control input-sm" name=""></td>
                                        </tr>
                                        <tr>
                                            <td>近红外额定值</td>
                                            <td><input class="form-control input-sm" name="near_infrared" placeholder="1" id="near_infrared"></td>
                                            <td><input class="form-control input-sm" name=""></td>
                                        </tr>
                                        <tr>
                                            <td>测点位置</td>
                                            <td><input class="form-control input-sm" name="loca
                                          tion" placeholder="01" id="location"></td>
                                            <td><input class="form-control input-sm" name=""></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {{ csrf_field() }}
                            <div class="modal-footer">
                                <a href="javascript:;" class="btn btn-sm btn-white"
                                   data-dismiss="modal">关闭</a>
                                <a id="save" name="save" class="btn btn-sm btn-primary">保存</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--编辑弹出框end-->
                <!-- 删除弹出框start -->
                <div class="modal fade" id="success-modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">×
                                </button>
                                <h4><i class="fa fa-info-circle"></i> 新增测点定义成功！</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 删除弹出框end -->
          
    </div>
  </div>
</div>
@endsection
@section('js')
  <script src="{{asset(getThemeAssets('plugins/jquery.dataTables.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('dataTables/datatables.min.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('plugins/toastr.min.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('layer/layer.js', true))}}"></script>
  <script type="text/javascript">
    $(document).on('click','.destroy_item',function() {
      var _item = $(this);
      var title = "{{trans('common.deleteTitle').trans('user.slug')}}？";
      layer.confirm(title, {
        btn: ['{{trans('common.yes')}}', '{{trans('common.no')}}'],
        icon: 5
      },function(index){
        _item.children('form').submit();
        layer.close(index);
      });
    });
  </script>
  <script>
      // ajax新增事件
        //新增事件时遍历每一个输入框的值赋空
        $("a[name='addLoop']").click(function () {
            $("#edit-modal input[name='monitor_id']").attr("readonly",false);
            $("#edit-modal input").each(function () {
                $(this).val(null);
            });
            $('#save').attr("name","save");

        });
        $('#edit-modal').on('click', "a[name='save']", function (e) {
            e.stopPropagation();
            var monitorInfo = {};
            var sensorInfo = {};
            monitorInfo['monitor_id'] = $('#monitor_id').val();
            monitorInfo['loop_name'] = $('#loop_name').val();
            monitorInfo['cable_temp'] = $('#cable_temp').val();
            monitorInfo['fire'] = $('#fire').val();
            monitorInfo['smoke'] = $('#smoke').val();
            monitorInfo['near_infrared'] = $('#near_infrared').val();
            monitorInfo['location'] = $('#location').val();
            $.ajaxSetup({
                     headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
            $.ajax({
                type: 'post',
                url: "{{url ('/admin/monitordefine/addmonitor')}}",
                data: {monitorInfo: monitorInfo, sensorInfo: sensorInfo},
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                success: function (res) {
                    if (res['res'] ==1 ) {
                        // table.row.add({'monitor_id':monitorInfo['monitor_id'],'loop_name':monitorInfo['loopname']}).draw();
                        $('#edit-modal').modal('hide');
                        // $('#success-modal').modal('show');
                        
                        alert('success');
                    } else {
                        alert("新增失败!");
                    }
                }
            });
        });      
  </script>
  {!! $html->scripts() !!}
@endsection
